<template>
	<view class="user-container">
		<!-- 已登录状态 -->
		<view class="user-info">
			<!-- 未登录状态 -->
			<view
				v-if="!userInfo"
				class="info-card">
				<image
					class="avatar"
					src="https://ciyu-edu.oss-cn-beijing.aliyuncs.com/user/a50d8b74-0844-4ce5-9901-275d3bd6f0f8.jpeg"
					mode="aspectFill" />
				<view class="user-detail unlogin">
					<button
						class="login-btn"
						open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber">
						点击登录
					</button>
				</view>
			</view>
			<view
				v-else
				class="info-card">
				<image
					class="avatar"
					:src="userInfo.avatar"
					mode="aspectFill" />

				<view class="user-detail">
					<text class="nickname">{{ userInfo.username }}</text>
					<text class="phone">{{ formatPhone(userInfo.phone) }}</text>
				</view>
				<!-- 加一个资料编辑按钮 -->
				<button
					class="edit-btn"
					@tap="handleEdit">
					<text class="btn-text">编辑资料</text>
				</button>
			</view>
		</view>

		<!-- 意见反馈 -->
		<view
			class="feedback-card"
			@tap="showFeedbackModal">
			<view class="feedback-left">
				<image
					class="feedback-icon"
					src="/static/images/feedback.png" />
				<text class="feedback-text">意见反馈</text>
			</view>
			<text class="iconfont icon-right"></text>
		</view>

		<view
			v-if="userInfo"
			class="logout-btn"
			@tap="handleLogout">
			退出登录
		</view>

		<!-- 反馈弹窗 -->
		<view
			class="feedback-modal"
			v-if="showFeedback">
			<view class="modal-content">
				<view class="modal-title">意见反馈</view>
				<textarea
					class="feedback-input"
					v-model="feedbackContent"
					placeholder="请输入您的宝贵意见"
					:maxlength="200"
					show-confirm-bar="false" />
				<view class="modal-buttons">
					<view
						class="btn cancel"
						@tap="closeFeedbackModal"
						>取消</view
					>
					<view
						class="btn confirm"
						@tap="handleFeedbackSubmit"
						>确定</view
					>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { useUserStore } from '../../stores/user'
import { storeToRefs } from 'pinia'
import { userApi } from '../../api/user.js'
import { ref, nextTick, onMounted } from 'vue'
// 引入 uni-popup 组件
import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue'
import uniPopupDialog from '@dcloudio/uni-ui/lib/uni-popup-dialog/uni-popup-dialog.vue'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

// 格式化手机号
const formatPhone = phone => {
	if (!phone) return ''
	return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}

const defaultAvatar =
	'https://ciyu-edu.oss-cn-beijing.aliyuncs.com/user/a50d8b74-0844-4ce5-9901-275d3bd6f0f8.jpeg'

// 处理手机号授权
const getPhoneNumber = async e => {
	console.log('授权手机号码:', e)
	if (e.detail.code) {
		// 直接调用登录方法，传入手机号授权信息
		await userStore.login(e)
	} else {
		uni.showToast({
			title: '授权失败',
			icon: 'none'
		})
	}
}

// 处理退出登录
const handleLogout = async () => {
	await userStore.logout()
}

// 跳转到编辑资料页面
const handleEdit = () => {
	uni.navigateTo({
		url: '/pages/edit-profile/edit-profile'
	})
}

// 反馈弹窗
const showFeedback = ref(false)
const feedbackContent = ref('')

// 显示反馈弹窗
const showFeedbackModal = () => {
	showFeedback.value = true
}

// 关闭反馈弹窗
const closeFeedbackModal = () => {
	showFeedback.value = false
	feedbackContent.value = ''
}

// 提交反馈
const handleFeedbackSubmit = async () => {
	try {
		if (!feedbackContent.value?.trim()) {
			uni.showToast({
				title: '请输入反馈内容',
				icon: 'none'
			})
			return
		}

    // TODO: 调用提交反馈接口
    console.log(userInfo.value)
		const result = await userApi.submitFeedback({
			content: feedbackContent.value,
			userId: userInfo.value?.id
		})

		uni.showToast({
			title: '感谢您的反馈',
			icon: 'success'
		})
		closeFeedbackModal()
	} catch (error) {
		uni.showToast({
			title: error.message || '提交失败',
			icon: 'none'
		})
	}
}


// 定义分享功能
const onShareAppMessage = () => {
	// 返回分享配置
	return {
		title: '爱德思题库',
		path: '/pages/study/study',
		imageUrl: '/static/images/logo.png', // 分享图片，可选
		success: function(res) {
			// 分享成功的回调
			uni.showToast({
				title: '分享成功',
				icon: 'success'
			})
		},
		fail: function(res) {
			// 分享失败的回调
			uni.showToast({
				title: '分享失败',
				icon: 'none'
			})
		}
	}
}

const onShareTimeline = () => {
	return {
		title: '爱德思题库',
		path: '/pages/study/study',
		imageUrl: '/static/images/logo.png'
	}
}

// 导出分享方法给页面实例使用
defineExpose({
	onShareAppMessage,
	onShareTimeline
})
</script>

<style lang="scss" scoped>
.user-container {
	min-height: 100vh;
	background: linear-gradient(to bottom, rgb(43,192, 228), rgb(234, 236, 198));
	box-sizing: border-box;
}

.login-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 200rpx;
}

.user-info {
	margin: 0 32rpx;
	padding-top: 100rpx;

	.info-card {
		background: rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(10px);
		border-radius: 24rpx;
		padding: 32rpx;
		display: flex;
		align-items: center;
		margin-bottom: 60rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.3);

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			border: 2rpx solid #fff;
			margin-right: 32rpx;
		}

		.login-btn {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			padding: 0;
			background: none;
			border: none;
			color: rgba(255, 255, 255, 0.8);
			font-size: 32rpx;
			line-height: 1.5;
			font-weight: normal;

			&::after {
				border: none;
			}

			&:active {
				opacity: 0.8;
			}
		}

		.user-detail {
			display: flex;
			flex-direction: column;
			justify-content: center;
			&.unlogin {
				// width: 100%;
				height: 144rpx;
				flex: 1 1 0;
			}

			.nickname {
				color: #fff;
				font-size: 32rpx;
				font-weight: 500;
				margin-bottom: 12rpx;
			}

			.phone {
				color: rgba(255, 255, 255, 0.8);
				font-size: 28rpx;
			}
		}
	}

	.edit-btn {
		padding: 0 32rpx;
		height: 64rpx;
		background: rgba(255, 255, 255, 0.2);
		color: #fff;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid rgba(255, 255, 255, 0.5);
		backdrop-filter: blur(10px);
		transition: all 0.3s ease;
		margin-left: auto;
		margin-right: 0;

		.btn-text {
			color: #fff;
			font-size: 28rpx;
			font-weight: 500;
		}

		&:active {
			transform: scale(0.98);
			background: rgba(255, 255, 255, 0.3);
		}

		&::after {
			border: none;
		}
	}
}

.logout-btn {
	position: fixed;
	bottom: 100rpx;
	left: 32rpx;
	right: 32rpx;
	height: 88rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 32rpx;
	font-weight: 500;
	border: 2rpx solid rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(10px);
	transition: all 0.3s ease;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

	&:active {
		transform: translateY(2rpx);
		background: rgba(255, 255, 255, 0.3);
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}
}

.feedback-card {
	margin: 32rpx;
	padding: 32rpx;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	border-radius: 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 2rpx solid rgba(255, 255, 255, 0.3);

	.feedback-left {
		display: flex;
		align-items: center;

		.feedback-icon {
			width: 48rpx;
			height: 48rpx;
			margin-right: 16rpx;
		}

		.feedback-text {
			color: #fff;
			font-size: 32rpx;
			font-weight: 500;
		}
	}

	.icon-right {
		color: rgba(255, 255, 255, 0.8);
		font-size: 32rpx;
	}

	&:active {
		background: rgba(255, 255, 255, 0.3);
	}
}

.feedback-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;

	.modal-content {
		width: 600rpx;
		background: #fff;
		border-radius: 24rpx;
		overflow: hidden;

		.modal-title {
			padding: 32rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			border-bottom: 2rpx solid #eee;
		}

		.feedback-input {
			width: 100%;
			height: 300rpx;
			padding: 32rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			line-height: 1.5;
		}

		.modal-buttons {
			display: flex;
			border-top: 2rpx solid #eee;

			.btn {
				flex: 1;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;

				&.cancel {
					color: #666;
					border-right: 2rpx solid #eee;
				}

				&.confirm {
					color: #3bccdd;
					font-weight: 500;
				}

				&:active {
					background: #f5f5f5;
				}
			}
		}
	}
}
</style>
